<script>
import { Slider } from 'ant-design-vue';

export default {
  name: 'Slider',

  components: {
    ASlider: Slider
  },

  props: {
    // 自定义样式
    sliderStyle: {
      type: Object,
      default() {
        return {}
      }
    },
    // 自动获取焦点
    autoFocus: {
      type: Boolean,
      default: false
    },
    // 初始值,可以是Number或Array<number>
    defaultValue: {
      type: Number || Array,
      default: 0
    },
    // 设置当前取值,range为true时[0,0],否则0
    value: {
      type: Number,
      default: 0
    },
    // 是否只能拖拽带刻度上
    dots: {
      type: Boolean,
      default: false
    },
    // marks 不为空对象时有效
    // 值为 true 时表示值为包含关系，false 表示并列
    included: {
      type: Boolean,
      default: true
    },
    // 刻度标记
    marks: {
      type: Object,
      default() {
        return {}
      }
    },
    // 最大值
    max: {
      type: Number,
      default: 100
    },
    // 最小值
    min: {
      type: Number,
      default: 0
    },
    // 双滑块模式
    range: {
      type: Boolean,
      default: false
    },
    // 反向坐标轴
    reverse: {
      type: Boolean,
      default: false
    },
    // 	步长，取值必须大于 0，并且可被 (max - min) 整除。
    // 当 marks 不为空对象时，可以设置 step 为 nul
    step: {
      type: Number,
      default: 1
    },
    tipFormatter: {
      type: Function,
      default: null
    },
    // 值为 true 时，Slider 为垂直方向
    vertical: {
      type: Boolean,
      default: false
    },
    // 设置Tooltip展示位置
    tooltipPlacement: {
      type: String,
      default: 'top'
    },
    getTooltipPopupContainer: {
      type: Function,
      default: () => document.body
    },
    // 禁用滑块
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否显示左右两侧的时间
    sideTime: {
      type: Number,
      default: 0
    },
    // 左侧实时时间
    currentTime: {
      type: String,
      default: '00:00'
    },
    // 右侧总时间
    duration: {
      type: String,
      default: '00:00'
    }
  },

  render(h) {
    // 滑块
    let slider = h('a-slider', {
      style: this.sliderStyle,
      props: {
        autoFocus: this.autoFocus,
        defaultValue: this.defaultValue,
        disabled: this.disabled,
        dots: this.dots,
        included: this.included,
        marks: this.marks,
        max: this.max,
        min: this.min,
        range: this.range,
        reverse: this.reverse,
        step: this.step,
        tipFormatter: this.tipFormatter,
        value: this.value,
        vertical: this.vertical,
        tooltipPlacement: this.tooltipPlacement,
        getTooltipPopupContainer: this.getTooltipPopupContainer
      },
      on: {
        // 滑块移动时
        change: value => {
          this.$emit('changeValue', value);
        }
      }
    });
    return h('div', {
      staticClass: 'player-progress',
    }, [
      // 左侧时间
      h('span', {
        domProps: {
          innerHTML: this.currentTime
        },
        directives: [{
          name: "show",
          rawName: "v-show",
          value: this.sideTime,
          expression: "this.sideTime",
        }]
      }),
      slider,
      h('span', {
        domProps: {
          innerHTML: this.duration
        },
        directives: [{
          name: "show",
          rawName: "v-show",
          value: this.sideTime,
          expression: "this.sideTime",
        }]
      })
    ]);
  }
}
</script>

<style lang="less" scoped>
.player-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  /deep/.ant-slider-track {
    background-color: #ec4141;
  }
  /deep/.ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open),
  /deep/.ant-slider-handle {
    border-color: #ec4141;
  }
}
</style>